<template>
  <div class="order-management-container">
    <!-- 标题 -->
    <h1>订单管理</h1>

    <!-- 搜索表单 -->
    <form id="searchForm" class="mb-4">
      <div class="input-group">
        <input
          type="text"
          v-model="searchParams.orderNumber"
          placeholder="订单号"
          class="form-control"
        />
        <input
          type="text"
          v-model="searchParams.receiverName"
          placeholder="收货人"
          class="form-control"
        />
        <input
          type="text"
          v-model="searchParams.receiverPhone"
          placeholder="手机号"
          class="form-control"
        />
        <select v-model="searchParams.status" class="form-control">
          <option value="">订单状态</option>
          <option value="已受理">已受理</option>
          <option value="已完成">已完成</option>
        </select>
        <button type="button" class="btn btn-primary" @click="searchOrders">
          搜索
        </button>
      </div>
    </form>

    <!-- 订单列表 -->
    <table class="table table-striped">
      <thead>
        <tr>
          <th>订单号</th>
          <th>下单时间</th>
          <th>联系电话</th>
          <th>收货人</th>
          <th>送货地址</th>
          <th>送达时间</th>
          <th>备注</th>
          <th>订单金额</th>
          <th>订单状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="order in orders" :key="order.id">
          <td>{{ order.orderNumber }}</td>
          <td>{{ order.createdAt }}</td>
          <td>{{ order.receiverPhone }}</td>
          <td>{{ order.receiverName }}</td>
          <td>{{ order.receiverAddress }}</td>
          <td>{{ order.deliveryTime }}</td>
          <td>{{ order.note }}</td>
          <td>{{ order.amount }}</td>
          <td>{{ order.status }}</td>
          <td>
            <button class="btn btn-primary btn-sm mx-1" @click="viewOrder(order.id)">
              查看
            </button>
            <button class="btn btn-secondary btn-sm mx-1" @click="editOrder(order.id)">
              编辑
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 分页 -->
    <div class="d-flex justify-content-center">
      <pagination
        v-model:page="currentPage"
        :total-pages="totalPages"
        @page-change="handleChangePage"
      ></pagination>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import Pagination from "./ch1/Pagination.vue"; // 假设分页组件已经在同一目录

export default {
  components: {
    Pagination,
  },
  setup() {
    // 数据状态
    const orders = ref([]); // 订单列表
    const totalPages = ref(0); // 总页数
    const currentPage = ref(1); // 当前页码
    const searchParams = ref({
      orderNumber: "",
      receiverName: "",
      receiverPhone: "",
      status: "",
    }); // 搜索参数

    // 模拟 API 请求
    const fetchOrders = async (page = 1) => {
      const queryParams = {
        ...searchParams.value,
        page,
      };

      // 模拟 API 调用
      // 请替换为您的真实 API 调用
      const response = await fetch(
        `/api/orders?${new URLSearchParams(queryParams)}`
      );
      const data = await response.json();

      orders.value = data.results;
      totalPages.value = data.pagination.totalPages;
    };

    // 搜索订单
    const searchOrders = () => {
      currentPage.value = 1; // 搜索时重置页码到第一页
      fetchOrders();
    };

    // 分页操作
    const handleChangePage = (newPage) => {
      currentPage.value = newPage;
      fetchOrders(newPage);
    };

    // 初始化加载订单
    onMounted(() => {
      fetchOrders();
    });

    // 模拟订单详情和编辑功能
    const viewOrder = (orderId) => {
      alert(`查看订单 ID: ${orderId}`);
    };

    const editOrder = (orderId) => {
      alert(`编辑订单 ID: ${orderId}`);
    };

    return {
      orders,
      totalPages,
      currentPage,
      searchParams,
      searchOrders,
      viewOrder,
      editOrder,
      handleChangePage,
    };
  },
};
</script>

<style scoped>
.order-management-container {
  padding: 20px;
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  text-align: center;
}

.pagination {
  margin-top: 20px;
}
</style>
